<?php
/**
 * Created by PhpStorm.
 * User: luanyoushu
 * Date: 2017/9/19
 * Time: 21:30
 */
?>

<html>

<style>

    .contentParent {
         display: flex;
         flex-direction: column;
         justify-content: space-between;

         align-items: center;

         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
         height: 300px;
         background-color: #2CB200;
     }

    .contentParent1 {
        display: block;
        flex-direction: column;
        justify-content: space-around;

        align-items: center;

        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        background-color: #2CB200;
    }
</style>

<head>
<title>position</title>
</head>
<body>
弹性盒,布局
    <div class="contentParent">
        <div style="display:block:; position: relative; margin-right: 0px; background-color: #ff5555">
            #1#
        </div>
        <div style="display:block; position: relative; margin-right: 0px; background-color: #ff5555">
            #2#
        </div>
        <div style="display:block; position: relative; margin-right: 0px; background-color: #ff5555">
            #3#
        </div>
    </div>

    传统,布局 0
    <div class="contentParent1">
        <div style="display:flex:; position: relative; height: 20%;  background-color: #ff5505">
            #1#
        </div>
        <div style="display:flex; position: relative; height: 20%; background-color: #ff5555">
            #2#
        </div>
        <div style="display:flex; position: relative;margin-left: 50px; margin-right: 50px; height: 30px; bottom: 0px; top: -30px; background-color: #ff0555">
            <div>#3#</div>
        </div>
    </div>
传统,布局 1
<div class="contentParent1">
    <div style="display:flex:; position: relative; height: 20%;  background-color: #ff5505">
        #1#
    </div>
    <div style="display:flex; position: relative; height: 20%; background-color: #ff5555">
        #2#
    </div>
    <div style="display:block; position: relative;margin-left: 50px; margin-right: 50px;
    height: 30px; bottom: 0px; top: 0px; background-color: #ff0555">
        <div>#3#</div>
    </div>
</div>

fixed
<div style="display:block; position: fixed; height: 30px;
   left: 50px; right: 50px; bottom: 20px; background-color: #b3b3b3;">
    <div>#388#fixed  222222225  fixed</div>
</div>
<br>
ulli 布局


<!--//-->

传统布局2 absolute(margin-left: 100px; margin-bottom: 50px; 可用,left,right,bottom,top可用,width,height)
<div style="display:block; position: absolute; margin-left: 100px; margin-top: 50px;
    height: 30px; width: 80%;   background-color: #b3b3b3;">
    <div>#388#传统布局2</div>
</div>

<div style="display:block; position: absolute; left: 50px; right: 50px; margin-bottom: 0px; background-color: #b3b3b3;">
    <div>#388#传统布局22 block margin-bottom:0px</div>
</div>

absolute bottom safari chome 有兼容性问题

<div style="display:block; position: absolute; height: 30px; left: 50px; right: 50px; bottom: 0px; background-color: #b3b3b3;">
    <div>#388#传统布局 block bottom:0px</div>
</div>

</body>
</html>
